<template>
  <v-container class="white">
    <v-row>
      <v-col cols="12" md="4">
        <v-text-field
          color="block"
          outlined
          dense
          label="图片标题"
          v-model="search.name"
          class="ml-6"
        ></v-text-field>
      </v-col>

      <v-col cols="12" md="4" xl="4">
        <v-select
          color="block"
          :items="imageTypes"
          item-text="name"
          item-value="id"
          outlined
          dense
          label="图片类别"
          v-model="search.imageType"
        >
        </v-select>
      </v-col>
      <v-col cols="12" md="4">
        <v-btn outlined color="info" @click="getData">
          <v-icon left>mdi-magnify</v-icon>
          <span>检索</span>
        </v-btn>
      </v-col>
    </v-row>
    <viewer :images="getImageLinks">
      <div align="center">
        <div v-for="v in images" class="image-item" :key="v.id">
          <img :alt="v.name" :src="v.link | imageSizeFilter" height="195px" />
          <span class="type-text">{{ v.typeName }}</span>
          <span class="name-text">{{ v.name }}</span>
        </div>
      </div>
    </viewer>
    <div class="text-center">
      <v-pagination
        :value="pageNo"
        :length="pageCount"
        :total-visible="11"
        @previous="
          --pageNo;
          getData();
        "
        @next="
          ++pageNo;
          getData();
        "
        @input="pageNum"
      ></v-pagination>
    </div>
  </v-container>
</template>

<script>
import Vue from "vue";
import Viewer from "v-viewer";
import "viewerjs/dist/viewer.min.css";
import { allImageType } from "@/api/imageType";
import { imageList } from "@/api/image";
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
    zoomable: true,
    scalable: true,
    rotatabgle: true,
    navbar: true,
    title: true,
    inline: false,
    interval: 1000,
    zoomRatio: 0.25,
    toolbar: {
      zoomIn: 1,
      zoomOut: 1,
      prev: 1,
      play: {
        show: 1,
        size: "large"
      },
      next: 1,
      reset: 1
    }
  }
});
export default {
  name: "MediaImage",
  data() {
    return {
      images: [],
      pageNo: 1,
      pageCount: 1,
      search: {},
      imageTypes: []
    };
  },
  mounted() {
    this.getData();
    allImageType().then(res => {
      this.imageTypes = res.data.imageTypes;
      this.imageTypes.splice(0, 0, { name: "请选择类型", id: "" });
    });
  },
  methods: {
    getData() {
      imageList(this.pageNo, 15, this.search).then(res => {
        this.pageNo = res.data.page.current;
        this.pageCount = res.data.page.pages;
        this.images = res.data.page.records;
      });
    },
    pageNum(pageNo) {
      this.pageNo = pageNo;
      this.getData();
    }
  },
  computed: {
    getImageLinks() {
      return this.images.map(v => v.link);
    }
  },
  filters: {
    imageSizeFilter(val) {
      const indexOf = val.lastIndexOf(".");
      return `${val.substr(0, indexOf)}_1920x1080_90_r${val.substr(indexOf)}`;
    }
  }
};
</script>

<style scoped lang="scss">
.image-item {
  display: inline-block;
  position: relative;
  height: 195px;
  margin-right: 0.75em;
  margin-bottom: 15px;
  .type-text {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .name-text {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
